<template>
    <v-chart class="chart" :option="option" />
  </template>
  
  <script>
  import { use } from "echarts/core";
  import { CanvasRenderer } from "echarts/renderers";
  import { PieChart } from "echarts/charts";
  import {
    TitleComponent,
    TooltipComponent,
    LegendComponent
  } from "echarts/components";
  import VChart, { THEME_KEY } from "vue-echarts";
  
  use([
    CanvasRenderer,
    PieChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent
  ]);
  
  export default {
    name: "HelloWorld",
    components: {
      VChart
    },
    provide: {
      [THEME_KEY]: "white"
    },
    data() {
      return {
        option: {
          title: {
            text: "部门数据",
            left: "center"
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: "vertical",
            left: "left",
            data: [
              "开发部",
              "运维部",
              "测试部",
              "设计部",
              "策划部"
            ]
          },
          series: [
            {
              name: "Traffic Sources",
              type: "pie",
              radius: "55%",
              center: ["50%", "60%"],
              data: [
                { value: 335, name: "开发部" },
                { value: 310, name: "运维部" },
                { value: 234, name: "测试部" },
                { value: 135, name: "设计部" },
                { value: 1548, name: "策划部" }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              }
            }
          ]
        }
      };
    }
  };
  </script>
  
  <style scoped>
  .chart {
    height: 600px;
  }
  </style>